<template>
	<div class="student-list-container">
		<!-- 搜索区域 -->
		<div class="search-area">
			<el-input
				v-model="searchQuery"
				placeholder="输入学生姓名/学号搜索"
				clearable
				@clear="handleSearch"
				@keyup.enter="handleSearch"
			>
				<template #append>
					<el-button
						icon="el-icon-search"
						@click="handleSearch"
					/>
				</template>
			</el-input>
			<el-button type="primary" @click="handleAdd"
				>添加学生</el-button
			>
		</div>

		<!-- 表格区域 -->
		<el-table
			:data="tableData"
			border
			style="width: 100%"
			v-loading="loading"
		>
			<el-table-column prop="id" label="学号" width="120" />
			<el-table-column
				prop="name"
				label="姓名"
				width="120"
			/>
			<el-table-column
				prop="gender"
				label="性别"
				width="80"
			/>
			<el-table-column prop="class" label="班级" />
			<el-table-column
				prop="phone"
				label="联系电话"
				width="150"
			/>
			<el-table-column label="操作" width="180">
				<template #default="scope">
					<el-button
						size="mini"
						@click="handleEdit(scope.row)"
						>编辑</el-button
					>
					<el-button
						size="mini"
						type="danger"
						@click="handleDelete(scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页区域 -->
		<div class="pagination-area">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 20, 50, 100]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			/>
		</div>
	</div>
</template>

<script>
export default {
	name: 'StudentList',
	data() {
		return {
			searchQuery: '',
			tableData: [],
			loading: false,
			currentPage: 1,
			pageSize: 10,
			total: 0,
		};
	},
	created() {
		this.fetchData();
	},
	methods: {
		fetchData() {
			this.loading = true;
			// 这里替换为实际的API调用
		},
		handleSearch() {
			this.currentPage = 1;
			this.fetchData();
		},
		handleAdd() {
			this.$router.push({ name: 'StudentAdd' });
		},
		handleEdit(row) {
			this.$router.push({
				name: 'StudentAdd',
				query: { id: row.id },
			});
		},
		handleDelete(row) {
			this.$confirm('确认删除该学生信息?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}).then(() => {
				// 这里添加删除API调用
				this.$message.success('删除成功');
				this.fetchData();
			});
		},
		handleSizeChange(val) {
			this.pageSize = val;
			this.fetchData();
		},
		handleCurrentChange(val) {
			this.currentPage = val;
			this.fetchData();
		},
	},
};
</script>

<style scoped>
.student-list-container {
	padding: 20px;
}
.search-area {
	margin-bottom: 20px;
	display: flex;
}
.search-area .el-input {
	width: 300px;
	margin-right: 10px;
}
.pagination-area {
	margin-top: 20px;
	text-align: right;
}
</style>
